<template>
  <div class="all-rel">
    <div class="all-flex-center-end all-top-handle">
      <router-link to="/bargain/add"><span class="all-add-btn el-icon-plus"></span></router-link>
    </div>
    <div class="all-flow-table-box">
      <el-table ref="myTable" :data="list" border stripe>
        <el-table-column sortable align="center" prop="product_id" label="产品ID" width="90"></el-table-column>
        <el-table-column align="center" prop="productName" label="产品名称" width="150"></el-table-column>
        <el-table-column sortable align="center" prop="bargain_id" label="活动配置表ID" width="150"></el-table-column>
        <el-table-column sortable align="center" prop="activity_money" label="活动发起价" width="120"></el-table-column>
        <el-table-column sortable align="center" prop="bargain_min_price" label="每次砍价最低价格" width="160"></el-table-column>
        <el-table-column sortable align="center" prop="bargain_max_price" label="每次砍价最高价格" width="160"></el-table-column>
        <el-table-column align="center" prop="status" label="状态" width="90"
          :filters="[{text: '启用', value: 1}, {text: '禁用', value: 0}]"
          :filter-method="filterHandler"
        >
          <template slot-scope="scope">
            <span>{{scope.row.status === 1 ? "启用" : "禁用"}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" prop="begin_time" label="活动开始时间" width="160">
          <template slot-scope="scope">
            <span>{{exchangeTime(scope.row.begin_time)}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" prop="end_time" label="活动结束时间" width="160">
          <template slot-scope="scope">
            <span>{{exchangeTime(scope.row.end_time)}}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="操作" min-width="260">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="$router.push('/bargain/launcher-list?id=' + scope.row.bargain_id)">活动发起用户</el-button>
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" v-if="scope.row.status === 1" @click="handleStatus(scope.row)">禁用</el-button>
            <el-button size="mini" type="success" v-else @click="handleStatus(scope.row)">启用</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="all-pagination">
      <el-pagination background layout="prev, pager, next" :page-size="size" :total="count" @current-change="currentPage"></el-pagination>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      size: 10,
      count: 0,
      list: []
    };
  },
  methods: {
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    getList(page, size) {
      let _this = this;
      this.$ajax({
        url:'bargain/getlist',
        data:{
          app:{
            page: page,
            size: size === undefined ? this.size : size,
          }
        },
        success(res) {
          if (res.data.code === 1) {
            _this.list = res.data.content.list;
            _this.count = res.data.content.count;
          } else {
            _this.$message({
              message: res.data.msg,
              type: 'warning'
            });
          }
        }
      });
    },
    handleStatus(row){
      let _this = this;
      let text = row.status === 1 ? "禁用" : "启用"
      this.$confirm("确定要" + text + "么？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$ajax({
          url: 'bargain/updateStatus',
          data: {
            app:{
              bargain_id: row.bargain_id,
              status: row.status === 1 ? 0 : 1
            }
          },
          perfect(con, res) {
            _this.$message({
              message: res.data.msg,
              type: 'success',
              onClose(){
                _this.$router.go(0);
              }
            });
          }
        });
      }).catch(() => {});
    },
    handleEdit(row) {
      window.sessionStorage.bargainInfo = JSON.stringify(row);
      this.$router.push("/bargain/edit");
    },
    currentPage(page) {
      this.getList(page);
    },
    exchangeTime(res) {
      let time = new Date(res * 1000);
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let date = time.getDate();
      let hour = time.getHours();
      let minute = time.getMinutes();
      let second = time.getSeconds();
      return year + "-" + (month > 10 ? month : "0" + month) + "-" + (date > 10 ? date : "0" + date) + " " + (hour > 10 ? hour : "0" + hour) + ":" + (minute > 10 ? minute : "0" + minute) + ":" + (second > 10 ? second : "0" + second);
    }
  },
  created(){
    this.getList(1);
  }
};
</script>

<style scoped>
.shrink-box {
  width: 100%;
  font-size: 0;
}
.shrink-box >>> label {
  width: 90px;
  color: #99a9bf;
}
.shrink-box .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 33.333333%;
}
</style>
